<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="./wow/css/animate.css">
		<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<script src="./bootstrap/js/bootstrap.min.js"></script>


		<title>用户登录</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html,
		body {
			height: 100%;
			width: 100%;
			background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
		}

 

		form {
			/* border: 1px red solid; */
			width: 40%;
			min-width: 350px;
			margin: 0 auto;
			text-align: center;
			padding: 20px;
			border-radius: 5px;
			box-shadow: 0px 0px 30px #101214;
			background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
		}

		form>div.row {
			margin-bottom: 20px;
		}

		#mainContent {
			display: flex;
			align-items: center;
			height: 100%;
		
		}
	</style>
	<body>

		<div id="mainContent" class="container">
			<form action="" method="post" class="wow bounceInDown">
				<h3 style="margin-bottom: 30px;">用户登录</h3>
				<div class="row">
					<div class="col-4">
						用户名：
					</div>
					<div class="col-8">
						<input type="text" placeholder="至少6个字符" onfocusout="setCookie()" name="" id="usernameInput" value="" class="form-control" />
					</div>
				</div>
				<div class="row">
					<div class="col-4">
						密码：
					</div>
					<div class="col-8">
						<input type="password" placeholder="密码不能为空" name="" id="" value="" class="form-control" />
					</div>
				</div>
				<div class="row">
					<div class="col-6">
						<input type="reset" class="form-control btn btn-info" name="" id="" value="重置" />
					</div>
					<div class="col-6">
						<input type="submit" class="form-control btn btn-success" name="" id="" value="确定" />
					</div>

				</div>

				<div class="row">
					<div class="col-12">
						<a href="register2.html"><button class="form-control  btn btn-secondary"
								type="button">未注册用户去注册</button></a>
					</div>
				</div>
			</form>
		</div>
		

		<script src="./wow/js/wow.min.js"></script>
		<script>
		//-----------------------------下面是操作wow动画的
		
			if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
				new WOW().init();
			};
			//-----------------------------下面是操作cookie的
			 function setCookie(){
			  document.cookie ="username="+document.getElementById("usernameInput").value;
				 
			 }
			 
			// var cookieList = document.cookie.split("; ")
			 
			// for (let index in cookieList) {
			// 	item = cookieList[index]; //username=luolaoshi
			// 	itemkv = item.split("=");//[username,luolaoshi]
			// 	console.log("itemkv:",itemkv);
			// 	if (itemkv[0] =="gongzi"){
			// 		 document.getElementById("usernameInput").value =itemkv[1];
			// 		 break;
			// 	}
			 
			// }
			 
			
			// document.getElementById("usernameInput").value = "zhanglaoshi";
			
			
			
			
			
			//-----------------------------上面是操作cookie的
		</script>
	</body>
</html>
